<template>
    <div class="wrapper">
        <!-- 轮播组件 -->
        <Swiper :bannerImg="that.bannerImg"></Swiper>
        <!-- kinds组件 -->
        <kinds>
            <!-- kinds-item组件 -->
            <kinds-item img="/img/01.png" text="特色課"></kinds-item>
            <kinds-item img="/img/02.png" text="一对一辅导"></kinds-item>
            <kinds-item img="/img/03.png" text="学习日历"></kinds-item>
        </kinds>
        <div style="margin:130px 0 0 0"></div>
        <!-- 内容组件 -->
        <index-cont :listData="that.listData" @addDetail="addDetail" @CourseFn="CourseFn"></index-cont>
        <div id="drag" class="jdktma" @touchmove="moveFn" @click="toFn">
            <van-icon size="30px" color="#fff" name="envelop-o" />
        </div>
    </div>
</template>
<script setup>
import Swiper from '@/components/Swiper.vue'
import kinds from '@/components/kinds/index.vue'
import kindsItem from '@/components/kinds/kinds-item.vue'
import indexCont from '@/components/index-cont.vue'
import { getBannerPort, getListDataPort } from '@/api/index'
import axios from 'axios'
import { reactive, onMounted, watch } from 'vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { Button } from 'vant';


const router = useRouter()
let that = reactive({
    bannerImg: [],
    listData: [],
    show: false,
    kindscot: [],
})
onMounted(() => {
    axios.get('/api/stations').then(res => {
        console.log(res.data.data);
        that.kindscot = res.data.data

    })
    gettBanner()
    gettListData()
})
let gettBanner = async () => { // 获取轮播数据
    let res = await getBannerPort()
    console.log('---------', res)
    that.bannerImg = res.data
}
let gettListData = async () => {// 获取列表数据
    let res = await getListDataPort()
    that.listData = res.data
}
let addDetail = (item) => {// 点击跳转详情
    let token = localStorage.getItem('token')
    let iid = item.teacher_id
    router.push(`/teacher-detail?id=${iid}`)
}
let CourseFn = (item) => {//点击跳转课程
    let iid = item.id
    router.push(`/course-detail?id=${iid}`)
}
let moveFn = (e) => {
    e.preventDefault()
    let x = e.touches[0].clientX
    let y = e.touches[0].clientY

    if (x > 50 && x < document.body.clientWidth - 50 && y > 50 && y < document.body.clientHeight - 100) {
        let drag = document.getElementById("drag")
        drag.style.top = y - 50 + 'px'
        drag.style.left = x - 50 + 'px'
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    width: 100%;
    position: relative;
    background: #f4f4f4;
    margin-bottom: 50px;
    box-sizing: border-box;
}

.jdktma {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #007aff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 75px;
    right: 15px;
}
</style>